.logo {
  position: absolute;
  top: 0.45rem;
  left: 2.31rem;
  width: 1.09rem;
  height: 1.2rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.code {
  position: absolute;
  top: 15.8rem;
  left: 50%;
  margin-left: -0.89rem;
  width: 1.78rem;
  height: 1.78rem;
  background: url('../../img/code2.png') no-repeat;
  background-size: 100%;
  .title {
    position: relative;
    top: 0;
    width: 100%;
    color: #fff;
    line-height: 0.38rem;
    font-size: 0.18rem;
    font-weight: 700;
    text-align: center;
  }
  .qrCode {
    box-sizing: border-box;
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 50%;
    width: 1.12rem;
    height: 1.12rem;
    margin-left: -0.56rem;
    margin-top: -0.56rem;
    padding: 0.08rem;
    background-color: #ffffff;
    text-align: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.back {
  position: absolute;
  bottom: 0.75rem;
  left: 4.905rem;
  width: 0.99rem;
  height: 0.77rem;
  img {
    height: 100%;
    width: 100%;
  }
}

.main {
  // height没修改的话默认自适应，给最小高度超出会出现滚动条，尽量不要给固定高度
  position: relative;
  top: 2.57rem;
  margin: 0 auto;
  width: 8.91rem;
  height: 12.73rem;
  background: url('../../img/common.png') no-repeat;
  background-size: 100%;
  .title {
    position: relative;
    top: 0;
    color: #fff;
    font-size: 0.58rem;
    height: 0.98rem;
    line-height: 0.98rem;
    text-align: center;
  }
  .content {
    // 总之，把脱离文档流的元素放在不脱离文档流（需要占位置）的元素上就要用“子绝父相”
    // 绝对定位在文档中不占有位置， 子绝父绝都脱离文档流了
    position: absolute;
    width: 100%;
    height: 8.47rem;
    top: 2.24rem;
    .swiper-container {
      width: 100%;
      height: 8.47rem;
      .swiper-slide {
        height: 3.96rem;
        // padding: 0 0.75rem; // 不用给，swiper会自动调整
        margin-bottom: 0.12rem; // 千万不要设置的太大，否则看不到多行
        color: #fff;
        text-align: center;
        img {
          width: 2.93rem;
          height: 3.96rem;
        }
      }
    }
  }
  .content-bd{
    margin: 0 auto;
    width: 6.81rem;
    margin-top: 1.3rem;
    height: 8.47rem;
    line-height: 0.66rem;
    top: 2.24rem;
    color: #fff;
    font-size: 0.36rem;
    text-align: justify;
    text-align-last: left;
  }
  .btn {
    position: absolute;
    bottom: 1.15rem;
    width: 100%;
    z-index: 100;
    font-size: 0;
    .btn-wrapper {
      display: inline-block;
      width: 50%;
      vertical-align: top;
      .left-btn,
      .right-btn {
        box-sizing: border-box;
        width: 1.71rem;
        margin: 0 auto;
        padding: 0.08rem 0 0.08rem 0.14rem;
        color: #fff;
        font-size: 0.27rem;
        text-align: center;
        background: url('../../img/btn.png') no-repeat;
        background-size: 100%;
        &::after {
          display: none;
        }
      }
      .right-btn {
        padding: 0.08rem 0.21rem 0.08rem 0;
      }
    }
  }
}

.main1,
.main2,
.main3 {
  // height没修改的话默认自适应，给最小高度超出会出现滚动条，尽量不要给固定高度
  position: relative;
  top: 2.57rem;
  margin: 0 auto;
  width: 8.91rem;
  height: 4.01rem;
  background: url('../../img/index/first.png') no-repeat;
  background-size: 100% 100%;
  .title {
    position: relative;
    top: 0;
    color: #fff;
    font-size: 0.48rem;
    line-height: 0.72rem;
    text-align: center;
  }
  .content {
    // 总之，把脱离文档流的元素放在不脱离文档流（需要占位置）的元素上就要用“子绝父相”
    // 绝对定位在文档中不占有位置， 子绝父绝都脱离文档流了
    position: absolute;
    width: 100%;
    height: 2.5rem;
    .swiper-container {
      width: 100%;
      .swiper-slide {
        height: 2.5rem;
        // padding: 0 0.75rem; // 不用给，swiper会自动调整
        margin-bottom: 0.12rem; // 千万不要设置的太大，否则看不到多行
        color: #fff;
        text-align: center;
        img {
          width: 1.88rem;
          height: 2.5rem;
        }
      }
    }
  }
}
.main2 {
  top: 3rem;
}
.main3 {
  top: 3.42rem;
}
